import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';

import { SwiperComponent, SwiperDirective, SwiperConfigInterface,
  SwiperScrollbarInterface, SwiperPaginationInterface } from 'ngx-swiper-wrapper';
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';

@Component({
  selector: 'app-video-list',
  templateUrl: './video-list.component.html',
  styleUrls: ['./video-list.component.scss']
})
export class VideoListComponent implements OnInit {
  visible = true;
  count = 0;
  videos: any[] = [
    {
      id: 'df3e8f21c1bf4daa963d9cf973d4c037',
      imgSrc: 'video1.png'
    },
    {
      id: 'e07be085c6464d6086c6a855bd63115c',
      imgSrc: 'video2.png'
    },
    {
      id: '983fe889ec394089b0261335dea762d3',
      imgSrc: 'video3.png'
    },
    {
      id: 'a659467838284841946268036a6e09ec',
      imgSrc: 'video4.png'
    },
    {
      id: 'df3e8f21c1bf4daa963d9cf973d4c037',
      imgSrc: 'video1.png'
    },
    {
      id: 'e07be085c6464d6086c6a855bd63115c',
      imgSrc: 'video2.png'
    },
    {
      id: '983fe889ec394089b0261335dea762d3',
      imgSrc: 'video3.png'
    },
    {
      id: 'a659467838284841946268036a6e09ec',
      imgSrc: 'video4.png'
    }
  ];

  public config: SwiperConfigInterface = {
    a11y: true,
    direction: 'horizontal',
    slidesPerView: 4,
    keyboard: true,
    mousewheel: true,
    scrollbar: false,
    navigation: true,
    pagination: false
  };
  videoData = {
    properties: {
      monitor_id: ''
    }
  };
  index = 0;
  @ViewChild(SwiperComponent, { static: false }) componentRef?: SwiperComponent;
  @ViewChild(SwiperDirective, { static: false }) directiveRef?: SwiperDirective;
  tplModal: NzModalRef;

  constructor(private sanitizer: DomSanitizer,
              private modal: NzModalService) { }

  ngOnInit(): void {
  }

  open(): void {
    this.count++;
    this.visible = true;
  }

  close(): void {
    this.count++;
    console.log('close');
    this.visible = false;
  }

  showModal(id, tplContent: TemplateRef<{}>): void {
    this.videoData.properties.monitor_id = id;
    const that = this;
    this.tplModal = this.modal.create({
      nzTitle: '视频播放',
      nzContent: tplContent,
      nzWidth: 1100,
      nzFooter: null,
      nzMaskClosable: false,
      nzClosable: true,
      nzOnCancel(): void {
        that.destroyModal();
      }
    });

  }

  destroyModal() {
    this.tplModal.destroy();
  }

}
